<template>
  <div>
    <div class="regRatings">
      <div class="topBar" v-show="isShowTop">
        <i class="iconfont icon-liebiao"></i>
        <span>附近商家</span>
      </div>
      <div class="regListItems">
        <div
          class="regItem bottom-bar"
          v-for="(item, index) in items"
          :key="index"
          @click="goToShopBusiness(item.id, item.name)"
        >
          <div class="left">
            <img
              src="http://p0.meituan.net/200.0/deal/b8d69fe7f4d8360714b9fc73d07fd73e49880.jpg@101_0_500_500a%7C267h_267w_2e_90Q"
              alt=""
            />
          </div>
          <div class="right">
            <div class="topTitleDesc">
              <div class="lefttit">
                <span class="bgc">品牌</span>
                <h5>{{ item.name }}</h5>
              </div>
              <span class="bzc">保准菜</span>
            </div>
            <div class="topTitleDesc clearbgc">
              <div class="lefttit">
                <!-- rating -->
                <div class="rating">
                  <strong
                    v-for="(star, index) in getStar(item.rating)"
                    :class="star"
                    :key="index"
                  ></strong>
                </div>
                <span
                  style="
                    margin-left: 2px;
                    background-color: #fff;
                    color: #ff8600;
                  "
                  >{{ item.rating.toFixed(1) }}</span
                >
                月售{{ item.recent_order_num }}单
              </div>
              <div>
                <span
                  class="delivery_style"
                  style="
                    border: 1px solid transparent;
                    background-color: #3190e8;
                    color: #fff;
                  "
                  >蜂鸟专送</span
                ><span
                  style="color: #000; border: 1px solid transparent"
                  class="delivery_style"
                  >准时达</span
                >
              </div>
            </div>
            <div class="topTitleDesc clearbgc">
              <div class="price">
                <span style="color: #000">￥20</span>/
                <span>{{ item.piecewise_agent_fee.tips }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: this.value,
    };
  },
  props: {
    value: Array,
    isShowTop: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    items: {
      deep: true,
      handler(newV) {
        this.$emit("input", newV);
      },
    },
    value: {
      deep: true,
      handler(newV) {
        this.items = newV;
      },
    },
  },
  components: {},

  computed: {},

  methods: {
    goToShopBusiness(id, name) {
      this.$router.push(`/shopBusiness/${id}/${name}`);
    },
    getStar(rating) {
      let stars = ["off", "off", "off", "off", "off"];
      if (isNaN(rating)) return stars;
      let floor = Math.floor(rating);
      for (var num = 0; num < floor; num++) {
        stars[num] = "on";
      }
      // 判断是否是 半颗星星
      let fixed1 = (rating % floor).toFixed(1);
      if (fixed1 > 0.3 && fixed1 < 0.8) {
        stars[num] = "half";
      }
      return stars;
    },
  },
  mounted() {},
};
</script>
<style lang="stylus" scoped rel="stylesheet/stylus">

@import ("../../stylus/mixns.styl");
.rating
  display: flex;
  strong
    width: 7.5px;
    height: 7.5px;
    background-size: 100% 100%;

.half
  bg-image('../../assets/images/stars/star24_half')
.off
  bg-image('../../assets/images/stars/star24_off')
.on
  bg-image('../../assets/images/stars/star24_on')

.regRatings
  background-color: #fff;
  margin: auto;
  margin-top: 20px
  .topBar
    color: #707070
    font-size: 16px
    padding:15px 0;
    display: flex;
    align-items: center;
    i
      margin: 0 10px;
      font-size:26px
      font-weight:bold
  .regListItems
    .regItem
      margind-bottom: 20px;
      display: flex;
      align-items: center
      .left
        margin-left: 10px
        img
          width: 90px;
          height: 90px
      .right
        margin-left: 5px;
        padding:10px 0;
        width: 100%;
        padding-right: 10px

        .topTitleDesc
          display: flex;
          justify-content: space-between;
          align-items: center;
          font-size:12px

          .lefttit
            display: flex;
            justify-content: space-between
            align-items: center
            span:nth-child(1)
              background-color: yellow
            h5
                margin:0 0 0 4px
                width: 165px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-weight: 700;
                font-size: 14px;

          span:last-child
            background-color #eee
            letter-spacing: 2px;
.clearbgc
    margin-top: 10px
    span:nth-child(1)
        background-color: #fff ;
        display: inline-block;
        font-size: 12px;
        line-height: .6rem;
        color: #333;
        background-color: #ffd930;
        padding: 0 0.1rem;
        border-radius: 0.1rem;
        margin-right: 0.2rem;

    .price
        font-size:14px;
        span
            background-color #eee !important;
.bottom-bar
    bottom-border-1px($bc)
    padding: 10px 0;
.bgc
    display: inline-block;
    padding: 0 3px
    line-height: .6rem;
    color: #333;
    background-color: #ffd930  !important;font-weight: 900;
.bzc,.bgc
    font-size: 12px;
.delivery_style
  background-color: #3190e8;
  font-size: 14px;
  color: #fff;
  border: 1px solid #3190e8;
</style>
